<script setup lang="ts">
import type { FriendRequest } from '@/types/MyLook'
import { updateInterchangeState } from '@/services/my/MyInterchange/MyInterchange'

//接收到的参数
const { data } = defineProps({
  data: {
    type: Array as () => FriendRequest[],
  },
})

const emits = defineEmits(['getInterchange'])
let userID = '1'
// 接受好友请求
const acceptFriend = async (i_id:string) => {
  await updateInterchangeState(i_id, 1)
  emits('getInterchange')
}
//忽略好友请求
const ignoreFriend = async () => {
  console.log(222)

  await updateInterchangeState(userID, 2)
  emits('getInterchange')
}

// 跳转到用户详情详情
const jump = (id: string) => {
  uni.navigateTo({
    url: `/pages/search/particulars/index?id=${id}`,
  })
}
</script>

<template>
  <scroll-view scroll-y class="scrollView">
    <view class="item" v-for="item in data" :key="item.id">
      <view class="itemImg" @click="jump(item.id)">
        <image :src="item.avatar" mode="scaleToFill" v-if="item.avatar" class="avatar" />
        <image src="@/static/My/avatar.png" mode="scaleToFill" v-else class="avatar" />
      </view>
      <view class="itemContent" @click="jump(item.id)">
        <view class="contentName">
          <image
            src="@/static/My/man.png"
            mode="scaleToFill"
            class="sex"
            v-if="item.gender === '男'"
          />
          <image
            src="@/static/My/women.png"
            mode="scaleToFill"
            class="sex"
            v-if="item.gender === '女'"
          />
          {{ item.nickname }}
        </view>
        <view class="contentInfo">{{ `${item.age}岁/ ${item.height}cm / ${item.my_city}` }}</view>
      </view>
      <view class="itemBtn">
        <view class="btn" @click="()=>{
          acceptFriend(item.id)
        }">接受</view>
        <view class="btn btnActive" @click="ignoreFriend">忽略</view>
      </view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
.scrollView {
  width: 100%;
  padding: 2%;
  box-sizing: border-box;

  .item {
    width: 95%;
    height: 80rpx;
    margin: 0 auto;
    margin-bottom: 2%;
    display: flex;
    padding: 0 0 3% 0;
    box-sizing: border-box;
    justify-content: space-between;

    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 20rpx;
    }

    .itemContent {
      width: 50%;

      .contentName {
        font-size: 32rpx;
        font-weight: 500;

        .sex {
          width: 30rpx;
          height: 30rpx;
        }
      }

      .contentInfo {
        font-size: 24rpx;
        color: #999;
        margin: 4rpx 0px;
      }
    }

    .itemBtn {
      width: 200rpx;
      height: 100%;
      display: flex;

      .btn {
        color: #fff;
        padding: 10rpx;
        margin: 0% 5rpx;
        border-radius: 10rpx;
        box-sizing: border-box;
        background: linear-gradient(to right, #4cade2, #51aee3, #9dd3e9);
      }

      .btnActive {
        background: linear-gradient(to right, red, #f46f6f, #f27a7a);
      }
    }
  }
}
</style>
